import Time from "../../utils/time"
const app = getApp();
const api = require('../../utils/interface.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    index: '1',
    listShow: '1',
    hint: {
      name: '苦涩',
      rankIng: 46,

    },
    trophyTitle: [
      11, 22, 55, 88, 101, 55, 55, 99
    ],
    dayList: [{
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528128688402&di=0ab35793c7e297479e56ff841b08b7af&imgtype=0&src=http%3A%2F%2Fp5.yokacdn.com%2Fpic%2Fcr%2F2014%2F0821%2F1286020305.jpg',
        name: '苦涩1日',
        insistDay: '555',
        inter: '5552'
      },
      {
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528128688402&di=0ab35793c7e297479e56ff841b08b7af&imgtype=0&src=http%3A%2F%2Fp5.yokacdn.com%2Fpic%2Fcr%2F2014%2F0821%2F1286020305.jpg',
        name: '苦涩1',
        insistDay: '555',
        inter: '5552'
      },
      {
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528128688402&di=0ab35793c7e297479e56ff841b08b7af&imgtype=0&src=http%3A%2F%2Fp5.yokacdn.com%2Fpic%2Fcr%2F2014%2F0821%2F1286020305.jpg',
        name: '苦涩1',
        insistDay: '555',
        inter: '5552'
      }

    ],
    cardInfo: {
      avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528128688402&di=0ab35793c7e297479e56ff841b08b7af&imgtype=0&src=http%3A%2F%2Fp5.yokacdn.com%2Fpic%2Fcr%2F2014%2F0821%2F1286020305.jpg',
      name: '打卡一',
      addNumber: 5281
    },
    cardData: {},
    screenWidth: "",
    screenHeight: '',
    userInfo: {},

    type: 'day',
    cankingList: [],
    page: 1,
    size: 10,
    isload: false,
    groupId: 0,
    rankingInfo: {},
    honorList: [],
    honorCount:0,
    groupInfo: {},
    backImg: "",
    content: "",
    cgaRef: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options);
    this.setData({
      groupId: options.id == undefined ? 0 : options.id,
      userInfo: app.globalData.userInfo
    });
    this.get_ranking_list();
    this.get_ranking_head_info();
    this.get_group_info();
    this.group_calender_total();
    this.get_share_info();
  },
  //获取总打卡信息
  group_calender_total: function() {
    var that = this;
    var monthList = [];
    app.Post(api.wxapp.group_calender_total, {
      groupId: that.data.groupId
    }, function(res) {
      if (res.code == 1) {
        that.setData({
          cgaRef: res.data
        });
      } else if (res.code == 2) {
        wx.showModal({
          title: '系统提示',
          content: res.msg,
          success: function() {
            wx.navigateBack({
              delta: 1
            })
          }
        });
      } else {
        app.WxAlert(res.msg);
      }
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (!this.data.isload) {
      this.get_ranking_list();
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
      return {
          title: '测试分享',
          path: 'pages/index/index'
      }
  },
  //获取圈子详情
  get_group_info: function() {
    var that = this;
    app.Post(api.wxapp.clock_group_info, {
      groupId: that.data.groupId,
      hasPerson: false
    }, function(res) {
      if (res.code == 1) {
        that.setData({
          groupInfo: res.data
        });
      }
    });
  },
  skiwrank(e) {
    console.log(e.currentTarget.dataset.bind)
    let bind = e.currentTarget.dataset.bind
    if (bind == 1) {
      this.setData({
        type: "day"
      });
    } else if (bind == 2) {
      this.setData({
        type: "week"
      });
    } else {
      this.setData({
        type: "total"
      });
    }
    this.setData({
      listShow: bind,
      page: 1,
      cankingList: [],
      isload: false
    });
    this.get_ranking_list();

  },
  initCanvas: function() {
    let that = this,
      width = that.data.screenWidth * 0.8,
      height = that.data.screenHeight * 0.75,
      dataStr = (new Time()).getStringData(), // 时间
      bgImg = {}, // 背景图
      content = {}, //文字
      cardInfo = {}, // 打卡,
      erwei = {}, //二维码
      brand = {}, // 商标
      ctx = wx.createCanvasContext('shareCanvas') // 初始化canvas背景
    bgImg.url = that.data.backImg;
    bgImg.dx = 0;
    bgImg.dy = 0;
    bgImg.x = width;
    bgImg.y = height * 0.75;
    // 初始化 时间坐标
    dataStr.rect = {
      dx: width / 2 - 26,
      dy: height * 0.2,
      x: 52,
      y: 16
    }
    dataStr.border = {
      leftTop: {
        x: width / 2 - 25,
        y: height * 0.1
      },
      rightTop: {
        x: width / 2 + 25,
        y: height * 0.1
      },
      leftBottom: {
        x: width / 2 - 25,
        y: height * 0.2
      },
      rightBottom: {
        x: width / 2 + 25,
        y: height * 0.2
      }
    }
    dataStr.monthPosi = {
      x: width / 2,
      y: height * 0.13
    }
    dataStr.dayPosi = {
      x: width / 2,
      y: height * 0.19
    }
    dataStr.weekPosi = {
      x: width / 2,
      y: height * 0.2 + 14
    }
    var cy = 0;
    var contents = [];
    var str = '';
    for (var i = 0; i < that.data.content.length; i++) {
      if (str.length == 9) {
        cy += 25;
        contents.push({
          x1: width / 2,
          y1: height * 0.25 + cy,
          con: str
        });
      } else {
        str += that.data.content[i]
      }
    }
    if (contents.length <= 0) {
      contents.push({
        x1: width / 2,
        y1: height * 0.25 + 25,
        con: that.data.content
      });
    }
    // // 初始化 文字坐标
    // content = {
    //   x1: width / 2,
    //   y1: height * 0.25 + 25,
    //   cont1: '却依旧过不好这一生,',
    //   x2: width / 2,
    //   y2: height * 0.25 + 50,
    //   cont2: '却依旧过不好这一生,',
    //   x3: width / 2,
    //   y3: height * 0.25 + 75,
    //   cont3: '中国韩寒',
    // }
    // 初始化打卡信息坐标
    cardInfo = {
      nameInfo: {
        url: {
          url: that.data.userInfo.HeadImage,
          dx: width * 0.1 - 15,
          dy: height - 120,
          x: 30,
          y: 30,
          circleX: (width * 0.1),
          circleY: height - 105,
        },
        content: {
          name: that.data.userInfo.Nickname,
          dx: width * 0.1 + 20,
          dy: height - 100,
        }
      },
      cardDayInfo: {
        url: {
          dx: width * 0.1 - 10,
          dy: height - 85,
          x: 20,
          y: 20,
        },
        content: {
          name: "打卡第" + that.data.cgaRef.TotalDays + "天",
          dx: width * 0.1 + 20,
          dy: height - 70,
        }
      },
      cardContent: {
        url: {
          dx: width * 0.1 - 10,
          dy: height - 60,
          x: 20,
          y: 20,
        },
        content: {
          name: that.data.groupInfo.GroupName + " 打卡",
          dx: width * 0.1 + 20,
          dy: height - 45,
        }
      }

    }
    // 初始化二维码坐标
    erwei = {
      url: '',
      dx: width - 90,
      dy: height - 120,
      x: 80,
      y: 80
    }
    // 初始化坐标
    brand = {
      dx: width / 2 - 40,
      dy: height - 35,
      x: 80,
      y: 30
    }
    console.log(dataStr)

    that.backImage(ctx, bgImg, dataStr, cardInfo, erwei, brand, content);

  },
  /**
   *     绘制
   **/
  backImage: function(ctx, bgImage, dataStr, cardInfo, erwei, brand, contents) {
    console.log(cardInfo)
      let that =this
      console.log(that.data.screenHeight+"  =============" +that.data.screenWidth)
    wx.getImageInfo({
      src: bgImage.url,
      success: res => {
        console.log(res)
        ctx.beginPath()
          ctx.fillStyle = "white"
          ctx.strokeStyle = "white"
          ctx.fillRect(0,0,that.data.screenWidth,that.data.screenHeight)
        ctx.drawImage(res.path, bgImage.dx, bgImage.dy, bgImage.x, bgImage.y)

        ctx.fillRect(dataStr.rect.dx, dataStr.rect.dy, dataStr.rect.x, dataStr.rect.y);
        ctx.moveTo(dataStr.border.leftTop.x, dataStr.border.leftTop.y)

        ctx.lineTo(dataStr.border.rightTop.x, dataStr.border.rightTop.y)
        ctx.moveTo(dataStr.border.leftBottom.x, dataStr.border.leftBottom.y)
        ctx.strokeStyle = "white"
        ctx.lineTo(dataStr.border.leftTop.x, dataStr.border.leftTop.y)
        ctx.moveTo(dataStr.border.rightTop.x, dataStr.border.rightTop.y)
        ctx.lineTo(dataStr.border.rightBottom.x, dataStr.border.rightBottom.y)
        ctx.moveTo(dataStr.border.rightBottom.x, dataStr.border.rightBottom.y)
        ctx.lineTo(dataStr.border.leftBottom.x, dataStr.border.leftBottom.y)
        ctx.stroke()
        ctx.save()

        ctx.setTextAlign('center')
        ctx.setFillStyle('white')
        ctx.font = "bold " + '12' + "px sans-serif"
        ctx.fillText(dataStr.monthStr, dataStr.monthPosi.x, dataStr.monthPosi.y)

        ctx.setTextAlign('center')
        ctx.setFillStyle('white')
        ctx.font = "bold " + '25' + "px sans-serif"
        ctx.fillText(dataStr.day, dataStr.dayPosi.x, dataStr.dayPosi.y)
        ctx.setTextAlign('center')
        ctx.setFillStyle('#201d1d')
        ctx.font = "bold " + '13' + "px sans-serif"
        ctx.fillText(dataStr.weekStr, dataStr.weekPosi.x, dataStr.weekPosi.y)

        ctx.setTextAlign('center')
        ctx.setFillStyle('white')
        ctx.font = "bold " + '23' + "px Cursive"
        for (var i = 0; i < contents.length;i++){
          ctx.fillText(contents[i].con, contents[i].x1, contents[i].y1)
        }
        // ctx.fillText(content.cont2, content.x2, content.y2)
        // ctx.fillText(content.cont3, content.x3, content.y3)
        // 二维码
        ctx.drawImage("../../images/erwei.png", erwei.dx, erwei.dy, erwei.x, erwei.y)

        ctx.arc(cardInfo.nameInfo.url.circleX, cardInfo.nameInfo.url.circleY, 15, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(cardInfo.nameInfo.url.url, cardInfo.nameInfo.url.dx, cardInfo.nameInfo.url.dy, cardInfo.nameInfo.url.x, cardInfo.nameInfo.url.y)
        ctx.restore()
        ctx.setFillStyle('#201d1d')
        ctx.font = "bold " + '16' + "px sans-serif"
        ctx.fillText(cardInfo.nameInfo.content.name, cardInfo.nameInfo.content.dx, cardInfo.nameInfo.content.dy)
        ctx.drawImage("../../images/calendar2.png", cardInfo.cardDayInfo.url.dx, cardInfo.cardDayInfo.url.dy, cardInfo.cardDayInfo.url.x, cardInfo.cardDayInfo.url.y)
        ctx.setFillStyle('#999999')
        ctx.font = "bold " + '14' + "px sans-serif"
        ctx.fillText(cardInfo.cardDayInfo.content.name, cardInfo.cardDayInfo.content.dx, cardInfo.cardDayInfo.content.dy)
        ctx.drawImage("images/calendar2.png", cardInfo.cardContent.url.dx, cardInfo.cardContent.url.dy, cardInfo.cardContent.url.x, cardInfo.cardContent.url.y)
        ctx.fillText(cardInfo.cardContent.content.name, cardInfo.cardContent.content.dx, cardInfo.cardContent.content.dy)
        ctx.drawImage("images/brand.png", brand.dx, brand.dy, brand.x, brand.y)
        ctx.draw()


        // ctx.setTextAlign('center');
        // ctx.setFillStyle(content.color)
        // ctx.font = "bold " + content.size + "px sans-serif"
        // ctx.fillText(content.content, content.x, content.y)
        //
        // wx.getImageInfo({
        //     src: "images/erwei.png",
        //     success: data => {
        //         ctx.drawImage(data.path, erwei.dx, erwei.dy, erwei.x, erwei.y)
        //         ctx.stroke()
        //         ctx.draw()
        //     }
        // });


      }
    });
  },
  saveImage: function() {
    wx.showToast({
        title: '已保存在本地,请分享到朋友圈',
        icon:'none',
        success:res=>{
            wx.canvasToTempFilePath({
                canvasId: 'shareCanvas',
                success: function(res) {
                    wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function() {
                            wx.showToast({
                                title: '已保存'
                            })
                        }
                    })
                }
            }, this)
        }

    })


  },
  iphoneInfo: function() {
    let that = this
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight
        })
      }
    })
  },
  skiwHeader: function(e) {
    let bind = e.currentTarget.dataset.bind;
    let index = 1;
    if (bind == 1) {
      index = 1;
    } else if (bind == 2) {
      index = 2;
      this.get_honor_list();
    } else {
      index = 3;
      this.iphoneInfo();
      this.initCanvas();
    }
    this.setData({
      index: index
    })
  },
  //获取排行榜数据
  get_ranking_list: function() {
    var that = this;
    var param = {
      page: that.data.page,
      size: that.data.size,
      type: that.data.type,
      groupId: that.data.groupId
    };
    app.Post(api.wxapp.ranking_list, param, function(res) {
      if (res.code == 1) {
    
        that.setData({
          cankingList: that.data.cankingList.concat(res.data.RankingList)
        });
        if (res.data.RankingList.length < that.data.size) {
          that.setData({
            isload: true
          });
        } else {
          that.setData({
            page: that.data.page + 1
          });
        }
      } else {
        app.WxAlert(res.msg);
      }
    });
  },
  //获取排行榜头部信息
  get_ranking_head_info: function() {
    var that = this;
    app.Post(api.wxapp.ranking_head_info, {
      type: that.data.type,
      groupId: that.data.groupId
    }, function(res) {
      if (res.code == 1) {
        that.setData({
          rankingInfo: res.data
        });
      } else {
        that.setData({
          rankingInfo: null
        });
      }
    });
  },
  //获取打卡勋章
  get_honor_list: function() {
    var that = this;
    app.Post(api.wxapp.honor_get_list, {}, function(res) {
      if (res.code == 1) {
        that.setData({
          honorList: res.data.HonorList,
          honorCount: res.data.HonorCount
        });
      }
    });
  },
  //获取随机图片
  get_share_info: function() {
    var that = this;
    app.Post(api.wxapp.get_share_info, {}, function(res) {
      if (res.code == 1) {
        that.setData({
          content: res.data.ShareText,
          backImg: res.data.ShareImage
        });
      }
    });
  },    // 跳转到我的个人页面
  grzy: function (e) {
    wx.navigateTo({
      url: '../grzy/grzy?id=' + e.currentTarget.dataset.accid
    })
    // wx.navigateTo({
    //   url: '../fenxiang/fenxiang?id=' + e.currentTarget.dataset.accid
    // })
  },
})